<template>
	<!-- PDF预览组件 内容模版2 -->
	<view class="reportPreview">
		<view v-for="item,index in entity.template" :key="index" class="">
			<view v-if="item.ControlType == 'image'" class="">
				<view :class="item.Position">
					<image v-if="item.ControlKey=='CompanyLogo'" :class="item.ControlKey"
						:src="item.ControlValue||'https://prc-saas.oss-cn-beijing.aliyuncs.com/ProjectImg/logo.png'"
						mode="scaleToFill"></image>
					<image v-else-if="item.ControlKey=='ProjectImg'" :class="item.ControlKey"
						:src="item.ControlValue||'https://prc-saas.oss-cn-beijing.aliyuncs.com/ProjectImg/ProjectImg.png'"
						mode="scaleToFill"></image>
				</view>
			</view>
			<view v-else class="">
				<view v-if="item.ControlKey=='UnitName'" :class="item.Position">
					谨呈: {{item.ControlValue}}
				</view>
				<view v-else-if="item.ControlKey=='ReportDate'" :class="item.Position">
					日期: {{item.ControlValue?item.ControlValue.substring(0,10):''}}
				</view>
				<view v-else class="" :class="item.Position">
					{{item.ControlValue}}
				</view>
			</view>
		</view>
		<view class="echarts">
			<view class="echartsBox">
				<qiun-data-charts v-for="item,index in entity.echarts" :key="index" type="column" :animation="false"
					:chartData="item" :opts="opts" :canvasId="'chart'+index" />
			</view>
		</view>
		<view class="list">

			<view class="h-table">
				<view class="h-tr h-tr-3 h-thead">
					<view class="h-td" style="width: 100rpx;">序号</view>
					<view class="h-td" style="width: 300rpx;">照片</view>
					<view class="h-td" style="width: 330rpx;">分类</view>
				</view>
				<view class="h-tr h-tr-3" v-for="(item,index) in tableData" :key="index">
					<view class="h-td" style="width: 100rpx;">{{index}}</view>
					<view class="h-td" style="width: 300rpx;display: flex;flex-direction: column;">
						<image v-for="(v,i) in item.MediumList" :src="v.Murl" mode=""
							style="width: 200rpx;height:200rpx;margin-top: 10rpx;"></image>
					</view>
					<view class="h-td" style="display: flex;flex-direction: column;text;width: 330rpx;">
						<text v-for="(m,l) in item.PropData" :key="l">{{m.ControlName + ":" + m.DefaultValue}}</text>
						<text>描述 : {{item.Content}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/table/t-table.vue';
	import tTh from '@/components/table/t-th.vue';
	import tTr from '@/components/table/t-tr.vue';
	import tTd from '@/components/table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				boxHeight: 0, // box盒子的高度
				tableData: [],
				loading: false,
				entity: {},
				opts: {
					fontSize: 13,
					xAxis: {
						fontSize: 13,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 20,
						format: '222',
						title: ''
					},
					yAxis: {
						data: [{
							min: 0,
							max: 100
						}]
					},
				},
				options: {}
			}
		},
		mounted() {
			this.getBoxHeight();
		},
		onLoad(options) {
			if (options.obj) {
				this.options = JSON.parse(options.obj)
			}
			let data = uni.getStorageSync('previewData')
			this.entity = data
			// console.log('获取templateContent组件预览按钮传递过来的---------------', this.entity.data.TakeNotesList)
			this.tableData = this.entity.data.TakeNotesList
		},
		methods: {
			//获取盒子高度
			getBoxHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.table-header')
					.boundingClientRect(rect => {
						if (rect) {
							this.boxHeight = rect.height;
						}
					})
					.exec();
			},
		}
	}
</script>

<style scoped lang="scss">
	.h-table {
		.h-tr {
			border-top-style: dashed;
			border-left-style: dashed;
			border-bottom-style: dashed;
		}

		.h-td {
			border-right-style: dashed;
		}

		/* 行 */
		.h-tr {
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: stretch;
			align-content: center;

			border-color: #ccc;
			border-style: solid;
			border-width: 0;
			border-top-width: 1px;
			border-left-width: 1px;
			border-bottom-width: 1px;
			color: #333;

			/* 等比分列，1-6列 */
			@for $i from 1 through 3 {
				&-#{$i} {
					>.h-td {
						width: (100% / $i);
					}
				}
			}

			+.h-tr {
				border-top-style: none;
			}
		}

		/* 单元格 */
		.h-td {
			box-sizing: border-box;
			padding: 3px;
			word-break: break-all;
			border-color: #ccc;
			border-style: solid;
			border-width: 0;
			border-right-width: 1px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			min-height: 64rpx;

			/* 跨列 */
			&-colspan {
				flex-grow: 1;
				width: 0;
			}

			/* 内容顶部对齐 */
			&-top {
				align-items: flex-start;
				align-content: flex-start;
			}

			/* 内容底部对齐 */
			&-bottom {
				align-items: flex-end;
				align-content: flex-end;
			}

			/* 内容左边对齐 */
			&-left {
				justify-content: flex-start;
			}

			/* 内容右边对齐 */
			&-right {
				justify-content: flex-end;
			}
		}

		/* 表头 */
		.h-thead {
			background-color: #e6e6e6;
		}

	}

	.reportPreview {
		padding: 10px;
		font-size: 16px;
		line-height: 2;
		color: #000;
		font-weight: 600;
		overflow-y: scroll;
		height: 100vh;
		box-sizing: border-box;

		.list {
			border-bottom: none;
			border-right: none;
			font-weight: normal;

			.listItem {
				border-bottom: 1px solid #000;
				display: flex;

				.xuhao {
					width: 90rpx;
					border-right: 1px solid #000;
					padding: 10rpx;
				}

				.fenlei {
					width: 220rpx;
					border-right: 1px solid #000;
					padding: 10rpx;
				}

				.zhaopian {
					width: 220rpx;
					border-right: 1px solid #000;
					padding: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}

					.video {
						width: 200rpx;
						height: 200rpx;
						background-color: #000;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.remark {
					flex: 1;
					border-right: 1px solid #000;
					padding: 10rpx;
				}

				.th {
					text-align: center;
				}
			}
		}

		.echarts {
			height: 1200px;

			.echartsBox {
				width: 100;
				height: 400px;
			}
		}

		.CompanyLogo {
			width: 100px;
			height: 50px;
		}

		.ProjectImg {
			width: 100%;
			height: 280px;
		}

		.LEFT {
			text-align: left;
		}

		.CENTER {
			text-align: center;
		}

		.RIGHT {
			text-align: right;
		}
	}
</style>